<script setup>

</script>

<template>
    <div class="footer">
        <div class="footer-top">
          <ul>
            <li><img src="../assets/images/价格亲民.png" width="58px" height="58px" alt="">价格亲民</li>
            <li><img src="../assets/images/物流快捷.png" width="58px" height="58px" alt="">物流便捷</li>
            <li><img src="../assets/images/品质新鲜.png" width="58px" height="58px" alt="">品质新鲜</li>
            <li><img src="../assets/images/售后无忧.png" width="58px" height="58px" alt="">售后无忧</li>
          </ul>
        </div>
        <div class="footer-center">
          <div class="footer-center-left">
            <dl>
              <dt>购物指南</dt>
                <dd>购物流程</dd>
                <dd>支付方式</dd>
                <dd>售后规则</dd>
            </dl>
            <dl>
              <dt>配送方式</dt>
                <dd>配送运费</dd>
                <dd>配送范围</dd>
                <dd>配送时间</dd>
            </dl>
            <dl>
              <dt>关于我们</dt>
                <dd>平台规则</dd>
                <dd>联系我们</dd>
                <dd>问题反馈</dd>
            </dl>
            <dl>
              <dt>售后服务</dt>
                <dd>售后政策</dd>
                <dd>退款说明</dd>
                <dd>取消订单</dd>
            </dl>
            <dl>
              <dt>服务热线</dt>
                <dd>在线客服<img src="../assets/images/客服.png" style="margin-left: 5px;"></dd>
                <dd>客服电话 400-0000-000</dd>
                <dd>工作时间 周一至周日 8:00-18:00</dd>
            </dl>
          </div>
          <div class="footer-center-right">
            <div>
              <img src="../assets/images/qrcode.jpg" width="120px" height="120px">
              <span>微信公众号</span>
            </div>
            <div>
              <img src="../assets/images/qrcode.jpg" width="120px" height="120px">
              <span>APP下载二维码</span>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <div class="footer-bottom-first">
            <ul>
              <li>关于我们</li>
              <li>帮助中心</li>
              <li>售后服务</li>
              <li>配送与验收</li>
              <li>商务合作</li>
              <li>搜索推荐</li>
              <li>友情链接</li>
            </ul>
          </div>
          <div class="footer-bottom-last">
            CopyRight @ 小兔鲜
          </div>
        </div>
      </div>
</template>
<style lang="scss">
.footer{
    width: 100%;
    min-height: 500px;
    justify-content: space-around;
    .footer-top{
      width: 1240px;
      height: 200px;
      margin: 0 auto;
      border-bottom: 1px solid rgba(0,0,0,.05);
      display: flex;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
      justify-content: space-around;
      align-items: center;
      ul{
        display: flex;
        li{
          margin-right: 50px;
          img{
            margin-right: 20px;
          }
        }
      }
    }
    .footer-center{
      width: 1240px;
      margin: 0 auto;
      display: flex;
      margin-top: 60px;
      .footer-center-left{
        display: flex;
        dl{
          margin-right: 84px;
          dt{
            width: 72px;
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 400;
            margin-bottom: 30px;
          }
          dd{
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #969696;
            letter-spacing: 0;
            line-height: 22px;
            font-weight: 400;
          }
        }
      }
      .footer-center-right{
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #969696;
        letter-spacing: 0;
        font-weight: 400;
        display: flex;
        div{
          display: flex;
          margin-left: 55px;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .footer-bottom{
      width: 611px;
      height: 60px;
      margin: 0 auto;
      margin-top: 100.5px;
      padding-bottom: 40px;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #A1A1A1;
      letter-spacing: 0;
      text-align: center;
      line-height: 30px;
      font-weight: 400;
      .footer-bottom-first{
        ul{
          display: flex;
          justify-content: space-between;
        }
      }
      .footer-bottom-last{
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
    